<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <base th:href="${#request.getContextPath()+'/'}">
    <title>注册</title>

    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/shopping-mall-index.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/zhonglin.js"></script>
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script type="text/javascript" src="js/Validform_v5.3.2.js"></script>
    <link rel="stylesheet" type="text/css" href="h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="h-ui.admin/css/style.css" />
</head>
<body>

<!--top 开始-->
<div class="top">
    <div class="top-con w1200">
        <p class="t-con-l f-l">您好，欢迎来到宅客微购</p>
        <ul class="t-con-r f-r">
            <li><a href="#">我 (个人中心)</a></li>
            <li><a href="#">我的购物车</a></li>
            <li><a href="#">我的订单</a></li>
            <li class="erweima">
                <a href="#">扫描二维码</a>
                <div class="ewm-tu">
                    <a href="#"><img src="images/erweima-tu.jpg" /></a>
                </div>
            </li>
            <div style="clear:both;"></div>
        </ul>
        <div style="clear:both;"></div>
    </div>
</div>

<!--logo search 开始-->
<div class="hd-info1 w1200">
    <div class="logo f-l">
        <h1><a href="#" title="中林网站"><img src="images/logo.jpg" /></a></h1>
    </div>
    <div class="search f-r">
        <ul class="sp">
            <li class="current" ss-search="sp"><a href="JavaScript:;">商品</a></li>
            <li ss-search="dp"><a href="JavaScript:;">店铺</a></li>
            <div style="clear:both;"></div>
        </ul>
        <form action="http://localhost:8082/searchGoods" method="get">
            <div class="srh">
                <div class="ipt f-l">
                    <input type="text" name="key" placeholder="搜索商品..." ss-search-show="sp" />
                    <input type="text" placeholder="搜索店铺..." ss-search-show="dp" style="display:none;" />
                </div>
                <button type="submit" class="f-r">搜 索</button>
                <div style="clear:both;"></div>
            </div>
        </form>
        <ul class="sp2">
            <li><a href="#">绿豆</a></li>
            <li><a href="#">大米</a></li>
            <li><a href="#">驱蚊</a></li>
            <li><a href="#">洗面奶</a></li>
            <li><a href="#">格力空调</a></li>
            <li><a href="#">洗发护发</a></li>
            <li><a href="#">葡萄 </a></li>
            <li><a href="#">脉动</a></li>
            <li><a href="#">海鲜水产</a></li>
            <div style="clear:both;"></div>
        </ul>
    </div>
    <div style="clear:both;"></div>
</div>

<!--内容开始-->
<div class="password-con registered">
    <form action="" method="post" class="form form-horizontal" id="form-user-add">
        <div class="row cl">
            <label class="form-label col-3 col-sm-3"><span class="c-red">*</span>用户名：</label>
            <div class="formControls col-5 col-sm-6">
                <input type="text" class="input-text" value="" placeholder="" id="username" name="username"  errormsg="请输入4-16位字母或数字" datatype="/^[a-z,0-9]{4,16}$/" ajaxurl="sso/checkUsernameIsOne" sucmsg="用户名验证通过！"  nullmsg="用户名不能为空">
            </div>
            <div class="col-4 col-sm-3"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-3 col-sm-3"><span class="c-red">*</span>密码：</label>
            <div class="formControls col-5 col-sm-6">
                <input type="text" class="input-text" value="" placeholder="" id="password" name="password"  errormsg="请输入5-16位字符" datatype="*5-16"  nullmsg="密码不能为空">
            </div>
            <div class="col-4 col-sm-3"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-3 col-sm-3"><span class="c-red">*</span>确认密码：</label>
            <div class="formControls col-5 col-sm-6">
                <input type="text" class="input-text" value="" placeholder="" id="password2" name="password2" recheck="password" errormsg="两次输入密码不一致" datatype="*5-16"  nullmsg="密码不能为空">
            </div>
            <div class="col-4 col-sm-3"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-3 col-sm-3"><span class="c-red">*</span>用户昵称：</label>
            <div class="formControls col-5 col-sm-6">
                <input type="text" class="input-text" value="" placeholder="" id="nickName" name="nickName"  errormsg="请输入2-6位中文" datatype="/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,6}$/"  nullmsg="昵称不能为空">
            </div>
            <div class="col-4 col-sm-3"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="radio-box">
                    <input name="sex" type="radio" value="0" id="sex-1" checked>
                    <label for="sex-1">男</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="sex-2" value="1" name="sex">
                    <label for="sex-2">女</label>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-3 col-sm-3"><span class="c-red">*</span>邮箱：</label>
            <div class="formControls col-5 col-sm-6">
                <input type="text" class="input-text" value="" placeholder="" id="email" name="email" datatype="e" ajaxurl="sso/checkEmailIsOne" sucmsg="邮箱唯一验证通过！" errormsg="请输入正确邮箱" nullmsg="邮箱不能为空">
            </div>
            <div class="col-4 col-sm-3"></div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="button" id="reqCodeBut" onclick="requestCode()" value="&nbsp;&nbsp;获取验证码&nbsp;&nbsp;">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-3 col-sm-3"><span class="c-red">*</span>验证码：</label>
            <div class="formControls col-5 col-sm-6">
                <input type="text" class="input-text" value="" placeholder="" id="code" name="code" datatype="n" errormsg="请输入正确验证码" nullmsg="验证码不能为空">
            </div>
            <div class="col-4 col-sm-3"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-3 col-sm-3"><span class="c-red">*</span>免责声明：</label>
            <div class="formControls col-5 col-sm-6">
                    <input type="checkbox" name="disclaimer" datatype="disclaimer" id="disclaimer" nullmsg="请勾选免责声明"></input>
                    我有阅读并同意<span style="color: #f09e0b">《宅客微购网站服务协议》</span>
            </div>
            <div class="col-4 col-sm-3"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-1 col-sm-1"></label>
            <div class="formControls col-5 col-sm-6">
                <button type="submit" id="registerBut" class="psw-btn">立即注册</button>
            </div>
            <div class="col-4 col-sm-3"></div>
        </div>


    </form>
    <p class="sign-in">已有账号？请<a href="toLogin">登录</a></p>
</div>

<!--底部服务-->
<div class="ft-service">
    <div class="w1200">
        <div class="sv-con-l2 f-l">
            <dl>
                <dt><a href="#">新手上路</a></dt>
                <dd>
                    <a href="#">购物流程</a>
                    <a href="#">在线支付</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">配送方式</a></dt>
                <dd>
                    <a href="#">货到付款区域</a>
                    <a href="#">配送费标准</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">购物指南</a></dt>
                <dd>
                    <a href="#">常见问题</a>
                    <a href="#">订购流程</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">售后服务</a></dt>
                <dd>
                    <a href="#">售后服务保障</a>
                    <a href="#">退款说明</a>
                    <a href="#">新手选购商品总则</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">关于我们</a></dt>
                <dd>
                    <a href="#">投诉与建议</a>
                </dd>
            </dl>
            <div style="clear:both;"></div>
        </div>
        <div class="sv-con-r2 f-r">
            <p class="sv-r-tle">187-8660-5539</p>
            <p>周一至周五9:00-17:30</p>
            <p>（仅收市话费）</p>
            <a href="#" class="zxkf">24小时在线客服</a>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

<!--底部 版权-->
<div class="footer w1200">
    <p>
        <a href="#">关于我们</a><span>|</span>
        <a href="#">友情链接</a><span>|</span>
        <a href="#">宅客微购社区</a><span>|</span>
        <a href="#">诚征英才</a><span>|</span>
        <a href="#">商家登录</a><span>|</span>
        <a href="#">供应商登录</a><span>|</span>
        <a href="#">热门搜索</a><span>|</span>
        <a href="#">宅客微购新品</a><span>|</span>
        <a href="#">开放平台</a>
    </p>
    <p>
        沪ICP备13044278号<span>|</span>合字B1.B2-20130004<span>|</span>营业执照<span>|</span>互联网药品信息服务资格证<span>|</span>互联网药品交易服务资格证
    </p>
</div>
<script type="text/javascript" src="h-ui/js/submit_form_register.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript">
    $(function() {
        // if ($("#disclaimer").prop("checked") == false) {
        //     $("#registerBut").attr("disabled","disabled")
        // }else {
        //     $("#registerBut").removeAttr("disabled")
        // }
        $("#form-user-add").Validform({
            datatype:{
                "disclaimer":function(gets,obj,curform,regxp){
                    var need=1,
                        numselected=curform.find("input[name='"+obj.attr("name")+"']:checked").length;
                    return  numselected >= need ? true : "请勾选免责声明";
                },
            },
            tiptype:2
            ,callback:function(form){ // 表单校验通过后调用这个函数
                console.info("表单校验通过");
                submitForm("/sso/register","form-user-add")
                // 如果callback里明确return false，则表单不会提交，如果return true或没有return，则会提交表单
                return false;


            }
        });
    });
    function requestCode(){
        var email = $("#email").val();
        if (email==""){
            layer.msg('请先输入邮箱', {icon: 2});
        }else {
            $.post("sso/checkEmailCode",{emailStr:email});
            layer.msg("验证码已发送",{icon: 1});
            $("#reqCodeBut").attr("disabled","disabled");
            daojishi();
        }
    }
    var time=10;
    function daojishi() {
        if (time==0){
            $("#reqCodeBut").val("重新发送");
            $("#reqCodeBut").removeAttr("disabled");
            time=10;
            return ;
        }
        $("#reqCodeBut").val("验证码已发送"+time+"s");

        time--
        setTimeout(function () {
            daojishi();
        },1000)
    }
</script>
</body>
</html>